<template>
    <div class="login-page">
        <div class="zs"></div>
        <div class="zs2"></div>
        <div class="pic">
            <div class="xiao"></div>
            <div class="text"></div>
        </div>

        <div class="form">
            <div class="title"></div>
            <a-input v-model:value="username" placeholder="用户名">
                <template #prefix>
                    <span class="iconfont icon-yonghuming"></span>
                </template>
            </a-input>
            <div class="blank"></div>
            <a-input-password v-model:value="password" placeholder="密码">
                <template #prefix>
                    <span class="iconfont icon-mima"></span>
                </template>
            </a-input-password>
            <div class="blank"></div>
            <a-button type="primary" block @click="login">登录</a-button>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { defineComponent, reactive, toRefs } from 'vue';
import Http from '@/until/http';
import { messageTips } from '@/until/tools';

export default defineComponent({
    setup() {
        const router = useRouter();
        const state = reactive({
            username:'',
            password:''
        })

        const login=()=>{
            if(state.username.trim()==='') {
                messageTips('请输入用户名',2);
                return false;
            }
            if(state.password.trim()==='') {
                messageTips('请输入密码',2);
                return false;
            }
            Http.login({...state}).then(res=>{
                if(res) {
                    if(res.success) {
                        router.push({path:'/index'});
                    } else {
                        messageTips(res.message,1);
                    }
                }
            })
        }

        return {
            ...toRefs(state),
            login
        }
    }
})
</script>

<style lang="scss" scoped>
.login-page {
    height:100%;
    background:url(~@/assets/loginbg.png) bottom;
    background-size: cover;
    position: relative;
    .zs{
        width:392px;
        height:179px;
        background: url(~@/assets/login4.png);
        position: absolute;
        top:0;
        left:0;
    }
    .zs2{
        width:298px;
        height:295px;
        background: url(~@/assets/login5.png);
        position: absolute;
        top:0;
        right:0;
    }
    .pic {
        width:688px;
        height:375px;
        background:url(~@/assets/login1.png) no-repeat;
        position: absolute;
        top:50%;
        left:100px;
        margin-top:-188px;
        .xiao {
            width:200px;
            height:177px;
            position: absolute;
            left: 73px;
            top:65px;
            opacity: 80%;
            background:url(~@/assets/login2.png) no-repeat;
            background-size: cover;
        }
        .text {
            position: absolute;
            top:20px;
            left:450px;
            width:207px;
            height:292px;
            background: url(~@/assets/login3.png);
        }
    }

    

    .form {
        width:429px;
        height:360px;
        border-radius: 6px;
        position: absolute;
        top:50%;
        margin-top:-170px;
        right:150px; 
        padding:130px 60px 0 60px;
        background:url(@/assets/login-form.png);
        .blank {
            height:30px;
        }

        .title {
            width:331px;
            height:93px;
            background:url(~@/assets/login6.png);
            position: absolute;
            left:49px;
            top:24px;
        }
        button {
            background:#165a63;
            border-color:#165a63;
        }
    }
}
</style>